<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1.一个重要的内置关系:VueComponent. prototype.__proto__ === Vue.prototype
    2.为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性、方法。 -->
    <div id="app"></div>
    <script src="../vue.js"></script>
    <script>
        // function Demo() {
        //     this.a = 1
        //     this.b = 2
        // }
        // const d = new Demo()
        // Demo.prototype.x = 990
        // console.log(Demo.prototype)//显示原型对象
        // console.log(d.__proto__)//隐式原型属性
        // console.log(d.__proto__ === Demo.prototype)
        // console.log(d.x)


        Vue.prototype.x=99
        //定义school组件
        const School = Vue.extend({
            template: `
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="mu">点我提示学校名称</button>
            </div>`,
            name: "School",
            data() {
                return {
                    name: "广州白云学校",
                    address: "白云江高"
                };
            },
            methods: {
                mu() {
                    console.log(this.name)
                    console.log(this)
                    console.log(this.x)
                }
            }

        });



        //创建vm
        var vm = new Vue({
            el: '#app',
            data() {
                return {

                };
            },
            //注册组件 局部
            components: {
                School
            },
            template:
                `<div>
                <School></School>
               
            </div>`
        });
         console.dir(School.prototype.__proto__)

        //console.log(School.prototype.__proto__===Vue.prototype)
    </script>
</body>

</html>